﻿@(Layout = null)
<!DOCTYPE html>
<html class="fill-height">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Manage</title>

    <partial name="_ElementUiStylesPartial" />
    <partial name="_AvueStylesPartial" />
    <partial name="_AnimateCssStylesPartial" />
    <partial name="_SiteStylesPartial" />

    <style>
        body {
            margin: 0;
        }

        .fill-height {
            height: 100%;
        }

        .my-el-tab {
            border: none;
            box-shadow: none;
        }

        .my-el-tab .el-tabs__content {
            padding: 0;
            position: absolute;
            top: 41px;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .tab-pan-iframe {
            border: 0;
            width: 100%;
            height: 100%;
        }

        .el-scrollbar .el-scrollbar__wrap {
            overflow-x: hidden;
        }

        .my-el-menu .el-menu-item {
            height: auto;
        }

        .my-el-menu .line-feed {
            width: auto;
            line-height: normal;
            display: inline-block;
            word-break: normal;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        i.el-icon-refresh:hover {
            transition: all .3s cubic-bezier(.645,.045,.355,1);
            background-color: #C0C4CC;
            color: #FFF;
            border-radius: 50%;
        }
    </style>
</head>
<body class="fill-height">
    <div id="vue-app" class="fill-height">
        <el-container class="fill-height">
            <el-header style="border-bottom: 1px solid #778899">
                <el-row>
                    <el-col>
                        Header
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside style="width: 201px; border-right: 1px solid #778899">
                    <el-scrollbar class="fill-height"
                                  :native="false"
                                  :noresize="false">
                        <el-row>
                            <el-col>
                                <side-bar :menu="menu"
                                          :default-active="activeMenuItem"
                                          @@open="handleMenuEvent"
                                          @@close="handleMenuEvent"
                                          @@select="onMenuSelect"></side-bar>
                            </el-col>
                        </el-row>
                    </el-scrollbar>
                </el-aside>
                <el-container>
                    <el-main class="fill-height" style="padding: 0;">
                        <el-row class="fill-height">
                            <el-col class="fill-height">
                                <el-tabs class="fill-height my-el-tab"
                                         type="card"
                                         closable
                                         @@tab-click="onTabClick"
                                         @@tab-remove="onTabRemove"
                                         v-model="activeTab">
                                    <el-tab-pane style="height: 100%"
                                                 ref="manageTab"
                                                 :lazy="true"
                                                 v-for="(item, index) in manageTabs"
                                                 :key="item.index"
                                                 :name="item.index">
                                        <span slot="label">
                                            <i v-if="item.icon && item.icon.type === 'css'" :class="item.icon.value"></i>
                                            <img v-if="item.icon && item.icon.type === 'img'" :src="item.icon.value" />
                                            {{item.title}}
                                            <i class="el-icon-refresh"
                                               v-show="activeTab === item.index"
                                               @@click="refreshTab($refs.manageTab, item)"></i>
                                        </span>
                                        <iframe class="tab-pan-iframe" :src="item.link"></iframe>
                                    </el-tab-pane>
                                </el-tabs>
                            </el-col>
                        </el-row>
                    </el-main>
                    <el-footer style="border-top: 1px solid #778899">
                        <el-row>
                            <el-col>
                                Footer
                            </el-col>
                        </el-row>
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>

    <partial name="_LinqJsScriptsPartial" />
    <partial name="_JQueryScriptsPartial" />
    <partial name="_VueScriptsPartial" />
    <partial name="_ElementUiScriptsPartial" />
    <partial name="_AvueScriptsPartial" />
    <partial name="_SideBarPartial" />

    <script>
        Vue.prototype.$ = $; //挂载JQuery到Vue原型链
        Vue.prototype.Enumerable = Enumerable; //挂载linq-js到Vue原型链

        var vueApp = new Vue({
            el: '#vue-app',
            mounted: function() {
                //setTimeout(() => this.activeMenuItem = 'sys-user', 1500);
            },
            data: function () {
                return {
                    activeTab: '',
                    activeMenuItem: null,
                    menu:@Html.Raw(ViewBag.Menu),
                    manageTabs: []
                };
            },
            computed: {
                menuLinks: function() {
                    var menu = this.menu;

                    var menuDic = [];
                    var enumItems = function(items) {
                        for (var i = 0; i < items.length; i++) {
                            menuDic.push(items[i]);
                        }
                    };
                    var enumGroups = function(groups) {
                        for (var i = 0; i < groups.length; i++) {
                            if (groups[i].items && groups[i].items.length > 0) enumItems(groups[i].items);
                        }
                    };
                    var enumSubMenus = function(subMenus) {
                        for (var i = 0; i < subMenus.length; i++) {
                            if (subMenus[i].items && subMenus[i].items.length > 0) enumItems(subMenus[i].items);
                            if (subMenus[i].groups && subMenus[i].groups.length > 0) enumGroups(subMenus[i].groups);
                            if (subMenus[i].children && subMenus[i].children.length > 0) enumSubMenus(subMenus[i].children);
                        }
                    };

                    if (menu.items && menu.items.length > 0) enumItems(menu.items);
                    if (menu.groups && menu.groups.length > 0)enumGroups(menu.groups);
                    if (menu.children && menu.children.length > 0) enumSubMenus(menu.children);

                    return menuDic;
                }
            },
            methods: {
                refreshTab: function(refArr, item) {
                    var tab = refArr.asEnumerable().single(function (ref) { return ref.name === item.index });
                    tab.$el.children[0].contentWindow.location.reload(true);
                },
                onMenuSelect: function(index, indexPath) {
                    var menuLinks = this.menuLinks;
                    var manageTabs = this.manageTabs;

                    for (var i = 0; i < manageTabs.length; i++) {
                        if (manageTabs[i].index === index) {
                            this.activeTab = index;
                            return;
                        }
                    }

                    var menuItem = menuLinks.asEnumerable().single(function(item) {
                        return item.index === index;
                    });

                    manageTabs.push(menuItem);
                    this.activeTab = index;
                },
                handleMenuEvent: function (key, keyPath) {
                    //this.$message('打开菜单。key:' + key + '；keyPath:' + keyPath);
                    console.log(key, keyPath);
                },
                onTabClick: function(tab) {
                    this.activeMenuItem = tab.name;
                },
                onTabRemove: function (targetName) {
                    var _this = this;
                    var tabs = _this.manageTabs;

                    var nextTab = null;
                    tabs.forEach(function (tab, index) {
                        if (tab.index === targetName) {
                            nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                _this.activeTab = nextTab.index;
                                _this.activeMenuItem = _this.activeTab;
                            }
                        }
                    });
                    if (!nextTab) {
                        _this.activeTab = '';
                    }

                    _this.manageTabs = tabs.asEnumerable().where(function (tab) { return tab.index !== targetName }).toArray();
                }
            }
        });
    </script>
</body>
</html>
